<template>
    <div>
        <particles></particles>

        <div class='slide'>
            <div class='stage'>
                <h4 style="color: #FFFFFF;">{{ time }}</h4>
                <div class='logo' >
                    <img :src="($store.getters.tenantConfig.logo === $store.getters.website.tenantConfig.logoDefault ? '' : urllist.download) + $store.getters.tenantConfig.logo" style="width: 100%;"/>
                </div>
                <div style="text-align:center;font-size: 28px;font-weight: 700;color: #FFFFFF;">{{ $t($store.getters.tenantConfig.name) }}</div>
            </div>
        </div>

        <div class="form" id="form">
            <div style="padding: 5px;float: right;">
                <top-lang></top-lang>
            </div>
            <h3 v-if="isShowTenantSelect" style="text-align:center!important;">
                <el-dropdown @command="selectTenant">
                    <span style="margin:20px 0 10px 0;font-size: 28px;color: black;">{{ $t('login.title')+' '+activeTenant.tenant_name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
                    <el-dropdown-menu slot="dropdown" style="width: 150px;text-align: center">
                        <el-dropdown-item v-for="item in tenantList" :key="item.tenant_code" :command="item">{{ item.tenant_name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </h3>
            <h3 v-else style="text-align:center;margin:20px 0 10px 0;font-size: 28px;">{{ $t('login.title')+' '+$store.getters.tenantConfig.title }}</h3>
            <el-tabs v-model="activeName">
                <el-tab-pane :label="$t('login.AccessLogin')" name="user">
                    <userLogin :tenant-code="tenantCode"></userLogin>
                </el-tab-pane>
                <el-tab-pane :label="$t('login.PhoneLogin')" name="code">
                    <codeLogin :tenant-code="tenantCode"></codeLogin>
                </el-tab-pane>
                <el-tab-pane :label="$t('login.OtherLogin')" name="third">
                    <thirdLogin :tenant-code="tenantCode"></thirdLogin>
                </el-tab-pane>
            </el-tabs>

        </div>

    </div>
</template>

<script>
import request from '@/router/axios';
import userLogin from "./userlogin";
import codeLogin from "./codelogin";
import thirdLogin from "./thirdlogin";
import {
    dateFormat
} from "@/util/date";
import {
    validatenull
} from "@/util/validate";
import topLang from "@/page/index/top/top-lang";
import topColor from "@/page/index/top/top-color";
import Particles from '@/components/particles/index';
import {mapGetters} from "vuex";
import { getAuthorization } from '@/util/util';

export default {
    name: "login",
    components: {
        userLogin,
        codeLogin,
        thirdLogin,
        topLang,
        topColor,
        Particles
    },
    data() {
        return {
            time: "",
            activeName: "user",
            isShowTenantSelect: false,
            tenantCode: '',
            tenantList: [],
            activeTenant: {
                tenant_name: '',
                tenant_code: ''
            }
        };
    },
    watch: {
        $route() {
            const params = this.$route.query;
            this.socialForm.state = params.state;
            this.socialForm.code = params.code;
            if (!validatenull(this.socialForm.state)) {
                const loading = this.$loading({
                    lock: true,
                    text: `${
                        this.socialForm.state === "WX" ? "微信" : "QQ"
                    }登录中,请稍后。。。`,
                    spinner: "el-icon-loading"
                });
                setTimeout(() => {
                    loading.close();
                }, 2000);
            }
        }
    },
    computed: {
        ...mapGetters(["website"])
    },
    created() {
        this.getTime();
        setInterval(() => {
            this.getTime();
        }, 1000);
    },
    mounted() {
        window.$('#form').hide();
        window.$(document).ready(function () {
            window.$('#form').fadeIn(1500);
        });

        if (this.website.isTenant) {
            this.$store
                .dispatch("GetTenantCode").then((res) => {
                if (res.tenantCode) {
                    this.tenantCode = res.tenantCode;
                    this.isShowTenantSelect = false
                } else {
                    request({
                        url: window.urllist.tenantSelectors,
                        method: 'get',
                        headers: {
                            'Authorization': getAuthorization(this.website.clientCode, this.website.clientSecret),
                            'User-Type': 'web',
                        },
                        meta: {
                            isToken: false,
                        }
                    }).then(res=>{
                        this.tenantList = res.data.data;
                        this.activeTenant = this.tenantList[0];
                        this.tenantCode = this.activeTenant.tenant_code;
                    })
                    this.isShowTenantSelect = true;
                }
            });
        }
    },
    props: [],
    methods: {
        getTime() {
            this.time = dateFormat(new Date());
        },
        selectTenant(data){
            this.activeTenant = data;
            this.tenantCode = data.tenant_code;
        }
    }
};
</script>

<style lang="scss">
@import "@/styles/login.scss";

@media screen and (max-width: 970px) {
    .form {
        left: 39% !important;
    }
    .slide {
        display: none;
    }
}

.form {
    position: absolute;
    top: 40%;
    left: 70%;
    margin: -180px 0 0 -160px;
    width: 350px;
    height: 440px;
    padding: 36px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    z-index: 1024;
}

.slide .stage {
    position: absolute;
    left: 15%;
    width: 400px;
    z-index: 4;
    //background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    top: 25%;
}

.slide .stage .logo {
    text-align: center;
    padding: 20px;
}

</style>
